<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色列表</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<table id="demo" lay-filter="tt"></table>
		<!-- 三个按钮，放在工具条上的 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="setting">设置</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script>
			layui.use(['table', 'jquery','layer','transfer','form','tree'], function() {
				var table = layui.table;
				var $ = layui.jquery;
				var layer = layui.layer;
				var transfer = layui.transfer;
				var form = layui.form;
				var tree = layui.tree;
				//第一个实例
				table.render({ //渲染表格
					elem: '#demo' //绑定id
					,toolbar: '#toolbarDemo'
					,height: 312,
					url: 'http://stuapi.ysd3g.com/api/GetRolesLayUI' //数据接口
						,
					method: 'post' //请求方法为post
						,
					limit: 5 //一页显示条数
						,
					limits: [5, 10, 15, 20] //修改分页条页码下拉框
						,
					where: {
						token: '231649c6-3627-4a7c-b1e0-20da6cad93d6',
					},
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'Id',
								title: '角色id ',
								sort: true,
								fixed: 'left'
							}, {
								field: 'Name',
								title: '角色名称'
							}, {
								title:'操作',
								fixed: 'right',
								width: 200,
								align: 'center',
								toolbar: '#barDemo' //绑定工具条
							}
						]
					]
				});

				//监听工具条
				table.on('tool(tt)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					if (layEvent === 'setting') { //设置
						//layer.msg('设置');
						$("#rId").val(data.Id);
						$.post(
							'http://stuapi.ysd3g.com/api/GetModulesByRoleIdLayUI',
							{
								roleId:data.Id,
								token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
							},
							function(res){
								//渲染
								var inst1 = tree.render({
								  elem: '#tree'  //绑定元素
									,id:'demo1'
								  ,data: res
									,showCheckbox:true
								});
							},'json'
						);
						//do somehing
						layer.open({
						  type: 1,
						  title:'角色<font color="red">['+data.Name+']</font>设置模块',
						  area:['500px','460px'],
						  content: $('#test1') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
						});
					} else if (layEvent === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
							$.post(
								'http://stuapi.ysd3g.com/api/DeleteRole', {
									roleId: data.Id, //选中行的Id
									token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
								},
								function(res) {
									layer.msg(res.success);
								}, 'json'
							);
						});
					} else if (layEvent === 'edit') { //编辑
						//do something
						//layer.msg('编辑');
						//同步更新缓存对应的值
						//表单初始赋值
						form.val("ff", {
						  "name": data.Name // "name": "value"
						  ,"roleId": data.Id
						});
						layer.open({
						  type: 1,
						  title:'编辑角色<font color="red">['+data.Name+']</font>信息',
						  area:['500px','460px'],
						  content: $('#test2') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
						});
						
						obj.update({
							username: '123',
							title: 'xxx'
						});
					}
					
					
					
					
				});
				
				
				
				//监听事件——表头工具栏
				table.on('toolbar(tt)', function(obj){
				  var checkStatus = table.checkStatus(obj.config.id);
				  switch(obj.event){
				    case 'add':
				      //layer.msg('添加');
							layer.open({
							  type: 1,
							  title:'添加角色',
							  area:['500px','460px'],
							  content: $('#test3') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
							});
				    break;
				  };
				});

			});
		</script>
	</body>
	<!-- 树-角色设置模块  -->
	<div id="test1" style="display: none;">
		<input type="text" id="rId" name="rId" />
		<div id="tree"></div>
		<button class="layui-btn" onclick="addModules()">确定</button>
	</div>
	<script type="text/javascript">
		function addModules(){
			var parentIds='';
			//获取树的选中节点
			layui.use(['tree','jquery'],function(){
				var tree = layui.tree;
				var $ = layui.jquery;
				var checkData = tree.getChecked('demo1');
				
				for(var i=0;i<checkData.length;i++){
					//console.log(checkData[i].children);
					for(var j = 0;j<checkData[i].children.length;j++){
						//console.log(checkData[i].children[j].id);
						parentIds+=checkData[i].children[j].id+',';
					}
				}
				console.log(parentIds);
				$.post(
					'http:stuapi.ysd3g.com/api/SetSysRights',
					{
						parentIds:parentIds,
						rId:$("#rId").val(),
						token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
					},function(res){
						layer.msg(''+res.success);
					},'json'
				); 
			});
			
		}
	</script>
	<!--编辑角色  -->
	<div id="test2" style="display: none;">
		<form id="ff" class="layui-form" action="" lay-filter="ff">
			<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
			<input type="hidden" name="roleId"  />
			<div class="layui-form-item">
				<label class="layui-form-label">角色名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		
		<script>
			//Demo
			layui.use(['form', 'laydate','jquery'], function() {
				var form = layui.form;
				var laydate = layui.laydate;
				var $ = layui.jquery;
				//监听提交
				form.on('submit(edit)', function(data) {
					console.log(data);
					$.post(
						'http://stuapi.ysd3g.com/api/UpdateRole',
						data.field,
						function(res){
							//刷新页面
							location.reload();
						},'json'
					);
					return false;
				});
			});
		</script>
	</div>
	
	<!--添加角色  -->
	<div id="test3" style="display: none;">
		<form id="ff2" class="layui-form" action="" lay-filter="ff2">
			<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
			<div class="layui-form-item">
				<label class="layui-form-label">角色名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		
		<script>
			//Demo
			layui.use(['form', 'laydate','jquery'], function() {
				var form = layui.form;
				var laydate = layui.laydate;
				var $ = layui.jquery;
				//监听提交
				form.on('submit(add)', function(data) {
					console.log(data);
					$.post(
						'http://stuapi.ysd3g.com/api/CreateRole',
						data.field,
						function(res){
							//刷新页面
							location.reload();
						},'json'
					);
					return false;
				});
			});
		</script>
	</div>
	
	<!-- 头工具栏 -->
	<script type="text/html" id="toolbarDemo">
	  <div class="layui-btn-container">
	    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	  </div>
	</script>
</html>
